

import React from 'react';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { Row, Col, Card, Input, Button } from 'antd';
import TableList from './components/TableList'


const { Search } = Input;
const Category = () => {
  const gutter = 16;
  const numbers = ['一', '二', '三'];
  const listItems = numbers.map((number) =>
    <Col span={8}>
      <Card title={`${number}级分类`} bordered={false} style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
        <TableList />
      </Card>
    </Col>
  );
  return (
    <PageContainer>
      <Row gutter={gutter} style={{ marginBottom: gutter }}>
        <Col span={4}>
          <Search placeholder="输入搜索分类" style={{ width: 200 }} style={{ marginRight: 16 }} />
        </Col>
        <Col span={4}>
          <Button type="primary" onClick={(event) => history.push('/product/category/addPage')}>添加分类</Button>
        </Col>
      </Row>
      <Row gutter={gutter}>
        {listItems}
      </Row>

    </PageContainer>
  );
};

export default Category;
